<template>
  <div class="box flex justify-center items-center">
    <!-- <ball></ball> -->
    <!-- <div class="list">
      <div class="item" v-for="item in list" :key="item.id" :style="{ height: item.height + 'px' }">
        {{ item.id }}
      </div>
    </div> -->
    <vue-draggable-resizable class="text-box" :w="150" :h="150" :x="50" :y="50" :min-width="50" :min-height="50"
      @dragging="onDrag" @resizing="onResize">
      <div class="flex">
        <div class="text" :line-clamp="lineClamp">
          <label class="btn"></label>
          浮动元素是如何定位的 正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。浮动元素是如何定位的
          正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
        </div>
      </div>
    </vue-draggable-resizable>
  </div>
</template>

<script>
import ball from './components/ball';
import VueDraggableResizable from 'vue-draggable-resizable';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
import math from 'less/lib/less/functions/math';
export default {
  props: {},
  components: {
    ball,
    VueDraggableResizable
  },
  data() {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      inx: 1,
      list: [],
      params: {
        page: 1
      }
    };
  },
  computed: {
    lineClamp() {
      return Math.floor(this.height / (14 * 1.5))
    }
  },
  watch: {

  },
  created() {
    this.fetchData(1);
    this.fetchData(1);
  },
  mounted() { },
  methods: {
    async fetchData(page) {
      // if(this.loading)
      // if (page) this.params.page = page;
      const res = await this.getList();
      this.list.push(...res);
      console.log('list', this.list);
    },

    getList() {
      const list = Array.from({ length: 10 }, () => ({ id: this.inx++, height: 200 * Math.random().toFixed(2) }));
      return Promise.resolve(list);
    },

    randomHeight() {
      return Math.random();
    },

    onResize(x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag(x, y) {
      this.x = x;
      this.y = y;
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  width: 80vw;
  height: 80vh;
  background: #2e3e54;
}

.list {
  width: 400px;
  max-height: 400px;
  background: #888;
  -moz-columns: 5;
  columns: 5;
  column-gap: 10px;
}

.item {
  box-sizing: border-box;
  break-inside: avoid;
  background: #fff;
  border: 1px solid #000;
}

.text-box {
  background: #fff;
  border-radius: 8px;
}

.text {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    float: right;
    height: calc(100% - 1.5rem);
  }

  &::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
  }
}

.btn {
  float: right;
  clear: both;
  cursor: pointer;
  padding: 0rem .3rem;
  background-color: @dw-color-primary;
  color: #fff;
  border-radius: .3rem;
  width: fit-content;
  margin: 0 4px 0 14px;
  position: relative;

  &::before {
    content: '...';
    position: absolute;
    left: -4px;
    color: #333;
    transform: translateX(-100%)
  }

  &::after {
    content: '展开';
  }
}

.loop(24);

.loop(@n, @i: 1) when (@i =< @n) {
  [line-clamp="@{i}"] {
    line-height: 1.5;
    -webkit-line-clamp: @n;
    max-height: @i*1.5em;
    overflow: hidden;
  }

  .loop(@n, (@i + 1));

}
</style>
